<template>
	<view class="equity-card">
		<view class="card-title">
			{{ cardData.title }}
		</view>
		<view class="card-container" v-for="item in cardData.list">
			<view class="equity-icon" v-if="item.subTitle">
				<image style="width: 30rpx" :src="`${constInfo.srcConst}${item.icon}`" mode="widthFix"></image>
				{{ item.subTitle }}
			</view>
			<view class="link-guid">
				<up-grid :border="false" col="3" gap="24rpx">
					<up-grid-item
					    class="up-grid-item-class" v-for="(listItem, listIndex) in item.cardItem" :key="listIndex">
							<template v-if="cardData.title=='立减金权益'">
								<view class="list-img">
									<view class="money-position">
										<text style="font-size: 13rpx;scale: 0.9;">￥</text>
										<text class="money">30</text>
									</view>
									<image class="money-bg" style="width: 92rpx" :src="`${constInfo.srcConst}${listItem.vipIcon}`" mode="widthFix"></image>
								</view>
							</template>
							<template v-else>
								<view class="list-btn">
									<image style="width: 92rpx" :src="`${constInfo.srcConst}${listItem.vipIcon}`" mode="widthFix"></image>
								</view>
							</template>
					
						<view class="list-title">
							{{ listItem.vipTitle }}
						</view>
						<view class="list-line">
							<up-line length="120rpx" color="#BDD0E3"></up-line>
						</view>
						<view class="list-btn">
							<image style="width: 106rpx" :src="`${constInfo.srcConst}${listItem.button}`" mode="widthFix"></image>
						</view>
					</up-grid-item>
				</up-grid>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import initApi from '@/apis/init.js';
import { constStore } from '@/store/const.js';
const { constInfo } = constStore();
const props = defineProps({
	cardData: {
		type: Object,
		default: () => {}
	}
});
</script>

<style lang="scss" scoped>
.equity-card {
	margin: 50rpx;
	.card-title {
		font-weight: 600;
		font-size: 28rpx;
		color: #03111f;
		margin-bottom: 24rpx;
		}
	.card-container {
		.equity-icon {
			font-weight: 300;
			font-size: 24rpx;
			color: #333333;
			margin-bottom :24rpx;
		}
		.link-guid {
	
		 ::v-deep .up-grid-item-class {
				width: 200rpx;
				height: 240rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 2rpx 2rpx rgba(0,0,0,0.1);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				// padding:10rpx !important;
				.list-img{
					margin-top: 10rpx;
					.money-bg{
						position: relative;
					}
					.money-position{
						position: absolute;
						top: 40rpx;
						left: 60rpx;
						z-index: 199;
						.money{
							font-family: MiSans, MiSans;
							font-weight: 500;
							font-size: 40rpx;
							color: #775A07;
							line-height: 23rpx;
						
						}
					}
				}
				.list-title{
					font-weight: 400;
					font-size: 20rpx;
					color: #03111F;
					line-height: 23rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
				.list-line{
					margin: 12rpx 0 14rpx 0;
				}
				.list-btn{}
			}
		}
	}
}
</style>
